<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <title>WebSocket客户端</title>
</head>
<body>
<form onsubmit="return false;">
    <div>
        <input type="text" name="message" value="">
    </div>
    <div>
        <input type="button" value="发送websocket请求" onClick="send(this.form.message.value)">
    </div>
    <hr>
    <h2>收到返回:</h2>
    <textarea id="responseContent" style="width:1024px; height:300px"></textarea>
</form>
<script type="text/javascript">
    var socket;
    window.onload = function () {
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onmessage = function (event) {
                var ta = document.getElementById("responseContent");
                ta.value += event.data;
            };
            socket.onopen = function (event) {
                var ta = document.getElementById('responseContent');
                ta.value = "你当前的浏览器支持WebSocket,请进行后续操作\r\n";
            };
            socket.onclose = function (event) {
                var ta = document.getElementById('responseContent');
                ta.value = "";
                ta.value = "WebSocket连接已经关闭\r\n";
            }
        } else {
            alert("您的浏览器不支持WebSocket");
        }
    };

    function send(message) {
        if (!window.WebSocket) {
            return;
        }
        if (socket.readyState == WebSocket.OPEN) {
            socket.send(message);
        } else {
            alert("WebSocket连接没有建立成功！！");
        }
    }
</script>
</body>
</html>